import React from 'react';
import { DragSource } from 'react-dnd';
import { getEmptyImage } from 'react-dnd-html5-backend';

import Graphic from 'containers/data-center/report-management/custom-report/graphic';


/**
 * 从然哥18年写的 react-dnd copy过来的
 *
 * 页面左侧图标可拖拽组件块
 */
class DroppedDragItem extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    //链接拖拽的预览图片，用官方api给定一个空图片
    this.props.connectDragPreview(getEmptyImage(), {
      captureDraggingState: true,
    });
  }

  render() {
    const { widget, className, changingScreen } = this.props;
    const { isDragging, connectDragSource, onDrag } = this.props;
    return connectDragSource(
      <div>
        <Graphic
          shouldUpdate={onDrag}
          noRefresh
          displayMode={false}
          changingScreen={changingScreen}
          onStretchItem={(widget) => {
            this.props.onStretchItem(widget);
          }}
          onDeleteItem={(widget) => {
            this.props.onDeleteItem(widget);
          }}
          onEditItem={(widget) => {
            this.props.onEditItem(widget);
          }}
          className={className}
          widget={Object.assign({}, widget)}
        />
      </div>
    );
  }
}

DroppedDragItem.propTypes = {
  widget: React.PropTypes.object,
  connectDragSource: React.PropTypes.func.isRequired,  //自动注入
  connectDragPreview: React.PropTypes.func.isRequired,  //自动注入
  isDragging: React.PropTypes.bool.isRequired
};

export default DragSource(
  'graph-item',
  {
    beginDrag(props) {
      props.onDragDroppedItem && props.onDragDroppedItem(props.widget);
      return props.widget;
    },
  },
  (connect, monitor) => ({
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    isDragging: monitor.isDragging(),
  }))(DroppedDragItem);
